<template>
  <div class="sendDetail">
    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">面试-详情</h1>
        <div>
          <CopyOutlined class="icon"/>
          <FlagOutlined class="icon"/>
        </div>
      </div>
    </div>
    <div style="border: 2px solid #4D7181; padding: 20px;border-top: 30px solid #4D7181; border-radius: 10px">
      <div style="display: flex">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="面试连接">{{ formState.interviewUrl }}</a-descriptions-item>
            <a-descriptions-item label="面试状态">{{ formState.interviewStatus }}</a-descriptions-item>
            <a-descriptions-item label="面试备注">{{ formState.interviewDesc }}</a-descriptions-item>
            <a-descriptions-item label="面试时间">{{ formattedFoundationDate }}</a-descriptions-item>
            <a-descriptions-item label="公司名称">{{ formState.jobCompanyName }}</a-descriptions-item>
            <a-descriptions-item label="公司规模">{{ formState.jobCompanySize }}</a-descriptions-item>
            <a-descriptions-item label="岗位名称">{{ formState.jobTitle }}</a-descriptions-item>
            <a-descriptions-item label="岗位薪资">{{ formState.jobSalary }}</a-descriptions-item>
            <a-descriptions-item label="学历要求">{{ formState.jobEducationRequirement }}</a-descriptions-item>
            <a-descriptions-item label="专业要求">{{ formState.jobMajorRequirement }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div v-show="formState.jobCompanyLogo">
          <a-image
              :height="170"
              :src="'http://localhost:8080/file/download?name='+formState.jobCompanyLogo"
              :width="170"
          />
        </div>
      </div>
      <div v-if="isOffer" style="display:flex;justify-content:center;  width: 100%">
        <a-popconfirm cancel-text="取消" ok-text="确定" title="你确定发面试通知吗？" @confirm="showModal">
          <a-button style="width:200px" type="primary">通过-发出OFFER</a-button>
        </a-popconfirm>
        <a-button danger style="margin-left: 60px; width:200px" type="primary" @click="goBack">拒绝-发出面试结果
        </a-button>
      </div>
      <div v-else>
        <a-tag
            color="#87d068"
            style="width: 200px;height: 30px;font-size: 15px;display: flex;justify-content: center;align-items: center">
          已通过-并已发OFFER
        </a-tag>
      </div>
    </div>
  </div>
  <!--  对话框-->
  <div>
    <a-modal v-model:open="open" cancel-text="取消" ok-text="确认" title="OFFER-通知" @ok="handleOk">
      <a-form
          ref="formRef"
          :model="formState1"
          :rules="rules"
      >
        <a-form-item ref="studentName" label="Offer-学生" name="studentName">
          <a-input v-model:value="studentInfo.studentName" :bordered="false" style="width: 300px"/>
        </a-form-item>
        <a-form-item v-if="isJob" ref="jobTitle" label="岗位-名称" name="jobTitle">
          <a-input v-model:value="formState.jobTitle" :bordered="false" style="width: 300px"/>
        </a-form-item>
        <a-form-item v-else ref="offerJobId" label="岗位-名称" name="offerJobId">
          <a-select v-model:value="formState1.offerJobId" style="width: 300px" placeholder="选择岗位">
            <template v-for="job in enterpriseJobList" :key="job.jobId">
              <a-select-option :value="job.jobId">{{ job.jobTitle }}</a-select-option>
            </template>
          </a-select>
        </a-form-item>
        <a-form-item label="Offer-截止时间" name="offerExpirationDate" required>
          <a-date-picker
              v-model:value="formState1.offerExpirationDate"
              placeholder="选择截止时间"
              show-time
              style="width: 300px"
              type="date"
          />
        </a-form-item>
        <a-form-item label="Offer-补充信息" name="offerSupplementaryInformation">
          <a-textarea v-model:value="formState1.offerSupplementaryInformation"
                      placeholder="补充入职时间、材料、地点等等其他信息！" style="width: 300px;height: 100px"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {message} from "ant-design-vue";
import {CopyOutlined, FlagOutlined} from "@ant-design/icons-vue";
import {addInterviewAPI, queryInterviewByIdAPI, updateInterviewIsOfferAPI} from "@/apis/interview.js";
// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};
const route = useRoute()
//定义数据
const formState = reactive({
  interviewId: '',
  interviewUrl: '',
  interviewStatus: '',
  interviewIsOffer:'',
  interviewDesc: '',
  interviewData: '',
  interviewEnterpriseId: '',
  interviewStudentId: '',
  interviewJobId: '',
  jobCompanyName: '',
  jobTitle: '',
  jobSalary: '',
  jobEducationRequirement: '',
  jobMajorRequirement: '',
  jobCompanySize: '',
  jobCompanyLogo: '',
});
//获取数据
const useStore = useUserStore();
const offerData = reactive({
  jobId: '',
  enterpriseId: '',
  studentId: '',
})
const isOffer = ref(true)//是否发出offer
const isJob = ref(true)//是否有岗位
const enterpriseJobList = ref([])//企业岗位列表
const getData = async (interviewId) => {
  //查询面试信息
  const res = await queryInterviewByIdAPI(interviewId.value)
  if (res.data.flag) {
    formState.interviewId = res.data.data.interviewId;
    formState.interviewUrl = res.data.data.interviewUrl;
    formState.interviewStatus = res.data.data.interviewStatus;
    formState.interviewIsOffer = res.data.data.interviewIsOffer;
    //查询Offer信息
    if(res.data.data.interviewIsOffer === '已发出'){
      isOffer.value = false
    }
    formState.interviewDesc = res.data.data.interviewDesc;
    formState.interviewData = res.data.data.interviewData;
    formState.interviewEnterpriseId = res.data.data.interviewEnterpriseId;
    formState.interviewStudentId = res.data.data.interviewStudentId;
    if (res.data.data.interviewJobId === null) {
      isJob.value = false;
      const res2=await queryJobByEnterpriseIdAPI(res.data.data.interviewEnterpriseId)
      if(res2.data.flag){
        enterpriseJobList.value = res2.data.data;
      }
    }
    formState.interviewJobId = res.data.data.interviewJobId;
    formState.jobCompanyName = res.data.data.jobCompanyName;
    formState.jobTitle = res.data.data.jobTitle;
    formState.jobSalary = res.data.data.jobSalary;
    formState.jobEducationRequirement = res.data.data.jobEducationRequirement;
    formState.jobMajorRequirement = res.data.data.jobMajorRequirement;
    formState.jobCompanySize = res.data.data.jobCompanySize;
    formState.jobCompanyLogo = res.data.data.jobCompanyLogo;
    offerData.jobId = res.data.data.interviewJobId;
    offerData.enterpriseId = res.data.data.interviewEnterpriseId;
    offerData.studentId = res.data.data.interviewStudentId;
  }


}
//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.interviewData);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day} ${hours}:${minutes}`;
});
//接收路由参数
import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores/user.js";
import {queryStudentByIdAPI} from "@/apis/student.js";
import {addOfferAPI} from "@/apis/offer.js";
import {queryJobByEnterpriseIdAPI} from "@/apis/job.js";

const router = useRouter();
const interviewId = ref();
//返回
const goBack = () => {
  router.go(-1); // -1 表示返回上一个页面
}

// 生命周期
onMounted(() => {
  interviewId.value = route.params.interviewId;
  getData(interviewId)
});

const success = (msg) => {
  message.success(msg);
};
//对话框-通过发出面试通知
const open = ref(false);
const studentInfo = reactive({
  studentName: '',
});
const showModal = async () => {
  open.value = true;
  //根据学生ID获取学生信息
  const res = await queryStudentByIdAPI(formState.interviewStudentId)
  if (res.data.flag) {
    studentInfo.studentName = res.data.data.studentName;
  }
};
const handleOk = async () => {
  formState1.offerStudentId = formState.interviewStudentId;
  if(isJob.value){
    formState1.offerJobId = formState.interviewJobId;
  }
  formState1.offerEnterpriseId = formState.interviewEnterpriseId;
  formState1.offerStatus = '已发出';
  const res = await addOfferAPI(formState1)
  if (res.data.flag) {
    formState.interviewIsOffer = '已发出'
    await updateInterviewIsOfferAPI(formState.interviewId, formState.interviewIsOffer)
    message.success('Offer已发出！');
    setTimeout(function () {
      goBack(); // 返回上一个页面
    }, 1000); // 1000毫秒即1秒
  }
  open.value = false;
};
const formState1 = reactive({
  offerStudentId: '',
  offerJobId: '',
  offerEnterpriseId: '',
  offerStatus: '',
  offerSupplementaryInformation: '',
  offerExpirationDate: undefined,
});
const rules = {
  studentName: [
    {
      required: true,
      message: '请输入Offer-学生',
      trigger: 'change',
    },
  ],
  offerJobId: [
    {
      required: true,
      message: '请输入Offer-岗位',
      trigger: 'change',
    },
  ],
  offerExpirationDate: [
    {
      required: true,
      message: '请选择Offer-截止时间',
      trigger: 'change',
      type: 'object',
    },
  ],
  offerSupplementaryInformation: [
    {
      required: true,
      message: '补充Offer其他信息',
      trigger: 'blur',
    },
  ],
};

</script>
<style scoped>
.sendDetail {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

}


</style>